<template>
  <el-dialog
    append-to-body
    title="PDF预览"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    width="70%"
    center
  >
    <div
      style="
        border: 1px solid;
        height: 80vh;
        position: relative;
        overflow-y: auto;
      "
    >
      <iframe
        :src="url"
        frameborder="no"
        style="width: 100%; height: 100%"
        scrolling="auto"
      />
      <div class="download" @click="abc">
        <i
          class="el-icon-download"
          style="font-size: 2rem; font-weight: 800"
        ></i>
        <i style="font-weight: 800">下载到本地</i>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
    },
    donwnurl: {
      type: String,
    },
  },
  data() {
    return {
      dialogVisible: true,
      url2: "",
    };
  },
  methods: {
    abc() {
      window.open(this.donwnurl);
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
// 弹窗表头/关闭
::v-deep .el-dialog__header {
  background: rgb(204, 204, 204);
  padding: 10px;

  & .el-dialog__headerbtn {
    // display: none;
    position: absolute;
    // top: 8px;
    // right: 20px;
    top: 2px;
    right: 15px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 30px;
    font-weight: 400;
  }
}
.download {
  padding-top: 10px;
  position: absolute;
  bottom: 1rem;
  right: 2rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-image: radial-gradient(
    circle farthest-side at center,
    #ffffff,
    #00ecf8 100%
  );
  background-size: 200% 200%;
  background-position: 100% 50%;
  transition: background-position 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation: flash 2s linear infinite;
  cursor: pointer;
}

@keyframes flash {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
</style>
